<template>
    <div class="table">
      <h1 class="title">查询电视剧资源</h1>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="名称" >
            <el-input v-model="formInline.name" placeholder="输入名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="类型" >
            <el-select v-model="formInline.resourceFlag" placeholder="类型" clearable>
              <el-option label="电视剧" value="02"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类地区">
            <el-select v-model="formInline.areaId" placeholder="请选择地区" clearable>
                    <el-option  v-for="item in areaId" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类类型">
              <el-select v-model="formInline.typeId" placeholder="请选择类型" clearable>
                      <el-option  v-for="item in typeId" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="VIP" >
            <el-select v-model="formInline.vipFlag" placeholder="请选择" clearable>
              <el-option label="是" value="01"></el-option>
              <el-option label="否" value="02"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上架状态" > 
            <el-select v-model="formInline.shelfState" placeholder="请选择" clearable>
              <el-option label="上架" value="01"></el-option>
              <el-option label="下架" value="02"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" v-waves icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-form>
      <el-row>
          <el-table
            v-loading="tableloading"
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
              type="index"
                width="55">
              </el-table-column>
              <el-table-column
                sortable
                align="center"
                prop="createTime"
                label="日期"
                width="190">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
                <el-table-column
                  prop="title"
                  align="center"
                  label="名称"
                  min-width="260">
                </el-table-column>
                  <el-table-column
                    prop="subtitle"
                    align="center"
                    label="副标题"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="hotDegree"
                    align="center"
                    label="热度"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="resourceFlag"
                    align="center"
                    label="资源类型"
                    width="120">
                    <template slot-scope="scope">{{getsourceTYpe(scope.row.resourceFlag)}}</template>
                  </el-table-column>
                  <el-table-column
                    prop="vipFlag"
                    align="center"
                    label="VIP"
                    width="120">
                    <template slot-scope="scope">{{getvipFlagTYpe(scope.row.vipFlag)}}</template>
                  </el-table-column>
                <el-table-column
                    prop="shelfState"
                    align="center"
                    label="上架状态"
                    width="120">
                    <template slot-scope="scope">{{getshelfStateTYpe(scope.row.shelfState)}}</template>
                  </el-table-column>
                <el-table-column
                    prop="areaId"
                    align="center"
                    label="分类地区"
                    width="120">
                    <template slot-scope="scope">{{getAreaTYpe(scope.row.areaId)}}</template>
                  </el-table-column>
                <el-table-column
                    prop="typeId"
                    align="center"
                    label="分类类型"
                    width="120">
                    <template slot-scope="scope">{{getTypeTYpe(scope.row.typeId)}}</template>
                  </el-table-column>
                  <el-table-column
                    prop="isRecommend"
                    align="center"
                    label="是否推荐"
                    width="120">
                    <template slot-scope="scope">{{getisRecommendTYpe(scope.row.isRecommend)}}</template>
                  </el-table-column>
                  <el-table-column
                      prop="keywords"
                      align="center"
                      label="关键字"
                      width="120"
                      >
                      <template slot-scope="scope">
                        <el-tag>{{scope.row.keywords}}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="190" align="center" fixed="right">
                      <template slot-scope="scope">
                        <el-button
                        icon="el-icon-edit"
                        style="background: #399bff;
                        border-color: #399bff;
                        color: #fff;"
                          size="mini"
                          v-waves
                          @click="edite(scope)"
                          >编辑</el-button>
                        <el-button
                        icon="el-icon-delete"
                          size="mini"
                          type="danger"
                          @click="deleteDetail(scope)"
                          >删除</el-button>
                      </template>
                    </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                  background
                  @size-change="pageSizeChange"
                  @current-change="pageIndexChange"
                  :current-page="pageIndex"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="dataTotal"
              ></el-pagination>
            </div>
              <el-dialog :visible.sync="dialogVisible" title="编辑资源信息">
                <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="标题" prop="resourceId" hidden>
                        <el-input v-model="ruleForm.resourceId" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="封面" prop="poster">
                        <el-input v-model="ruleForm.poster" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="资源类型" prop="resourceFlag">
                        <el-select v-model="ruleForm.resourceFlag" placeholder="请选择类型" clearable>
                        <el-option label="电影" value="01"></el-option>
                        <el-option label="电视剧" value="02"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类地区" prop="areaId">
                        <el-select v-model="ruleForm.areaId" placeholder="请选择地区" clearable>
                                <el-option
                                v-for="item in areaId"
                                :key="item.areaId"
                                :label="item.areaName"
                                :value="item.areaId">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类类型" prop="typeId">
                        <el-select v-model="ruleForm.typeId" placeholder="请选择类型" clearable>
                            <el-option
                            v-for="item in typeId"
                            :key="item.typeId"
                            :label="item.typeName"
                            :value="item.typeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="ruleForm.title" placeholder="请输入名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="副标题" prop="subtitle">
                        <el-input v-model="ruleForm.subtitle" placeholder="请输入名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="上架状态" prop="shelfState">
                        <el-select v-model="ruleForm.shelfState" placeholder="请选择状态" clearable>
                            <el-option label="上架" value="01"></el-option>
                            <el-option label="下架" value="02"></el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="是否VIP" prop="vipFlag">
                        <el-radio-group v-model="ruleForm.vipFlag" size="medium">
                            <el-radio border label="01">是</el-radio>
                            <el-radio border label="02">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否推荐" prop="isRecommend">
                        <el-radio-group v-model="ruleForm.isRecommend" size="medium">
                            <el-radio border label="01">推荐</el-radio>
                            <el-radio border label="02">不推荐</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="关键字" prop="keywords">
                        <el-input type="textarea" v-model="ruleForm.keywords" ></el-input>
                    </el-form-item>
                    <el-form-item label="热度" prop="hotDegree">
                        <el-input type="number" v-model="ruleForm.hotDegree" clearable></el-input>
                    </el-form-item> 
                    <el-form-item label="详情介绍" prop="introduce">
                        <el-input type="textarea" v-model="ruleForm.introduce" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-waves :loading="submitLoad" @click="submitForm(ruleForm)">立即提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
          </el-dialog>
      </el-row> 
    </div>
</template>

<script>
import waves from '@/directive/waves/index.js'
import Enum from "@/common/Enum.js"
import {getResourceBaseData ,getResourceAreas,getResourceTypes,getResourceBaseDetail,deleteResourceBase,resetResourceBase} from "@/api/index.js"
export default {
    directives: {
        waves
    },
    data() {
        return {
          tableloading : false,
          dialogVisible : false,
          submitLoad : false,
          formInline: {
            name: '',
            region: '',
            resourceFlag: '02',
            areaId: '',
            typeId: '',
            vipFlag: '',
            shelfState: '',
          },
          tableData: [],
          pageIndex: this.$store.getters.getOrderListIndex1,
          pageSize: 10,
          dataTotal: 0,
          areaId : '',
          typeId : '',
          ruleForm: {
              title : '',
              subtitle : '',
              introduce : '',
              resourceFlag : '',
              vipFlag : '',
              shelfState : '',
              keywords : '',
              areaId : '',
              typeId : '',
              isRecommend : '',
              hotDegree : '',
              poster : ''
          },
        }
    },
    methods: {
      getsourceTYpe(type){
        return Enum.getsourceTYpe(type);
      },
      getvipFlagTYpe(type){
        return Enum.getvipFlagTYpe(type);
      },
      getshelfStateTYpe(type){
        return Enum.getshelfStateTYpe(type);
      },
      getisRecommendTYpe(type){
        return Enum.getisRecommendTYpe(type);
      },
      getAreaTYpe(type){
          let re = '';
          this.areaId.forEach(function (obj) {
            if (obj.areaId == type) {
              re = obj.areaName;
              return
            }
          });
          return re
      },
      getTypeTYpe(type){
        let re = '';
          this.typeId.forEach(function (obj) {
            if (obj.typeId == type) {
              re = obj.typeName;
              return
            }
          });
          return re
      },
              //////分页
      pageIndexChange(val) {
          this.pageIndex = val;
          this.$store.dispatch('setOrderListIndex1', val)
          this.getList();
      },
      pageSizeChange(val) {
      },
            ///////获取分类地区
      getArea(){
          let formData = {};
          getResourceAreas(formData).then(response => {
              if (response.data) {
                    this.areaId = response.data;
              } 
          }, response => {
          });
      },
      ///////获取分类类型
      getType(){
          let formData = {};
          getResourceTypes(formData).then(response => {
              if (response.data) {
                    this.typeId = response.data;
              } 
          }, response => {
          });
      },
            //////获取信息列表
      getList(){
          this.tableloading = true;
          let formData = {
              start : this.pageIndex,
              length : this.pageSize,
              search : this.formInline.name,
              resourceFlag : this.formInline.resourceFlag,
              areaId : this.formInline.areaId,
              typeId : this.formInline.typeId,
              vipFlag : this.formInline.vipFlag,
              shelfState : this.formInline.shelfState
          }
          setTimeout(() => {
              getResourceBaseData(formData).then(response => {
                  if (response.data) {
                      this.tableData = response.data;
                      this.dataTotal = response.recordsTotal;
                      this.tableloading = false;
                  } else {
                  // this.$message.error(response.message);
                  }
              }, response => {
              });
          }, 500);
      },
            /////获取详情
      getResourceBaseDetail(id){
          let formData = {
              resourceId : id,
          }
          getResourceBaseDetail(formData).then(response => {
              if (response.data) {
                  this.ruleForm = response.data;
              } else {
              // this.$message.error(response.message);
              }
          }, response => {
          });
      },
      ///////编辑
      edite(s){
            this.dialogVisible = true
            this.getResourceBaseDetail(s.row.resourceId);
      },
      //////删除
      deleteDetail(s){
          this.$confirm('确定要删除吗?', 'Warning', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(async() => {
              let formData = {
                  resourceId : s.row.resourceId,
              }
              deleteResourceBase(formData).then(response => {
                  if (response.code == '0') {
                      this.getList();
                  } else {
                  }
              }, response => {
              });
              this.$message({
                  type: 'success',
                  message: '删除成功!'
              })
          }).catch(err => { console.error(err) })
      },
            /////编辑提交
      submitForm(formname){  
          this.submitLoad = true;
          let formData = formname;
          resetResourceBase(formData).then(response => {
              if (response.code == 0) {
                  this.dialogVisible = false;
                  this.submitLoad = false;
                  this.$message('修改成功');
              } else {
                this.submitLoad = false;
              // this.$message.error(response.message);
              }
          }, response => {
          });
      },
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
            ////////搜索
      onSubmit() {
        this.getList();
      },
        //////重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    created(){
       this.getArea();
       this.getType();
    },
    mounted(){
      this.getList();
    }
}
</script>
<style lang="scss" scope>

  .table .el-pagination {
      float: right;
      padding: 20px 0;
      .el-row{
        padding: 60px 0;
      }
  }
</style>>